<template>
  <el-dialog
    title="添加人员信息"
    :visible.sync="roleDialogVisible"
    width="40%"
    :before-close="handleClose"
  >
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      :default-active="numbe"
      @select="handleSelect"
    >
      <el-menu-item index="4">已有人员邀请</el-menu-item>
      <el-menu-item index="1">未录入人员</el-menu-item>
    </el-menu>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      label-position="rigth"
      :inline="true"
    >
      <div v-if="numbe === '1'">
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="ruleForm.name"
            style="width: 450px"
            validate-event
          />
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="ruleForm.mobile" style="width: 450px" />
        </el-form-item>
        <el-form-item prop="site_id" label="所属部门">
          <el-cascader
            v-model="ruleForm.site_id"
            :show-all-levels="false"
            :props="{ checkStrictly: true }"
            :options="options"
            class="cascader"
            placeholder="请选择部门"
            style="width: 450px"
          />
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item label="手机号码" prop="mobiles">
          <el-input
            v-model="ruleForm.mobiles"
            style="width: 450px"
            @input="searchs"
          />
        </el-form-item>
        <div>
          查询人员信息结果：
          <h4>名字:{{ sj.name }}</h4>
          <h4>手机号:{{ sj.mobile }}</h4>
        </div>
      </div>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button
        v-loading="loading"
        type="primary"
        @click="addpush"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { validUsername } from '@/utils/validate'
import { addpeoplesAPI, searchaddAPI } from '@/api/AListOfUsers'
export default {
  name: 'AListo',
  props: {
    roleDialogVisible: {
      type: Boolean,
      default: false
    },
    information: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (validUsername(value)) {
        callback()
      } else {
        callback(new Error('电话号码格式不对'))
      }
    }
    return {
      sj: {},
      loading: false,
      ruleForm: {
        // name: '',
        // gender: '男' // 性别
        // birthday: '', // 生日
        // occupation: '', // 职业
        // diploma: '', // 文凭
        // phone: '', // 电话
        // address: '', // 邮箱
        // Identitycard: '', // 身份证
        // Address: '', // 地址
        // group: '', // 民族
        // Role: '', // 角色
        // site_id: '' // 部门
        // user_id:0,
        // image: '',
        user_id: '0'
      },
      rules: {
        name: [{ required: true, message: '请输入人员名字', trigger: 'blur' }],
        mobile: [
          { required: true, trigger: 'blur', validator: validateUsername }
        ],
        mobiles: [
          { required: true, trigger: 'blur', validator: validateUsername }
        ],
        site_id: [{ required: true, message: '请选择部门', trigger: 'blur' }]
      },
      options: [
        {
          id: 1,
          value: '山西省林业和草原有害生物检疫站',
          label: '山西省林业和草原有害生物检疫站',
          children: [
            {
              id: 4,
              value: '太原市检疫站',
              label: '太原市检疫站',
              children: [
                {
                  id: 9,
                  value: '小店区',
                  label: '小店区'
                },
                {
                  id: 10,
                  value: '小河区',
                  label: '小河区'
                }
              ]
            }
          ]
        }
      ],
      numbe: '1',
      times: null // 防抖变量
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:roleDialogVisible', false)
      // 重置表单
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {}
    },
    // 添加或者邀请
    async addpush() {
      try {
        await this.$refs.ruleForm.validate()
        this.ruleForm.site_id = '1'
        this.loading = true
        if (this.numbe === '1') {
          this.ruleForm.user_id = '0'
          await addpeoplesAPI(this.ruleForm)
          this.$message.success(`角色新增成功`)
        } else {
          this.ruleForm.user_id = '1'
          await addpeoplesAPI(this.ruleForm)
          this.$message.success(`角色邀请成功`)
        }

        this.handleClose()
        this.$parent.handleChange()
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    // 图片
    // beforeAvatarUpload(file) {
    //   const isLt5M = file.size / 1024 / 1024 < 5
    //   if (!isLt5M) {
    //     this.$message.error('上传头像图片大小不能超过 5MB!')
    //   }
    //   return isLt5M
    // },
    // async uploadimg({ file }) {
    //   console.log(file)
    //   try {
    //     const data = await addimgAPI(file)
    //     this.ruleForm.image = data
    //   } catch (error) {
    //     console.log(error)
    //   }
    // },

    // 变化时
    handleSelect(el) {
      this.numbe = el
      this.$refs.ruleForm.resetFields()
    },
    // 搜索
    searchs() {
      // 防抖
      if (this.times) clearTimeout(this.times)
      this.times = setTimeout(async() => {
        try {
          await this.$refs.ruleForm.validate()
          // console.log(this.ruleForm.mobiles)
          const res = await searchaddAPI(this.ruleForm)
          // console.log(res)
          this.sj = res
        } catch (error) {
          console.log(error)
        }
      }, 900)
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader-icon {
  border: 1px dashed #333;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #333;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
